<template>
	<fui-row style="margin-top:200rpx">
		<fui-col :span="12" class="fui-flex__center">
			<view class="wrapper" @click="toFaultReport">
				<fui-text class="text" size="32" color="#fff" text="故障报修"></fui-text>
				<fui-icon class="icon" color="#ffff" size="96" custom-prefix="iconfont" name="icon-baoxiu"></fui-icon>
			</view>
		</fui-col>
		<fui-col :span="12" class="fui-flex" style="justify-content: flex-end;">
			<view class="wrapper" @click="toReportSearch">
				<fui-text class="text" size="32" color="#fff" text="报修查询"></fui-text>
				<fui-icon class="icon" color="#ffff" size="96" custom-prefix="iconfont"
					name="icon-gongdanchaxun"></fui-icon>
			</view>
		</fui-col>
	</fui-row>
	<index-service-desk-card class="m-t-32" title="报障" :columns="reportColumns"></index-service-desk-card>
</template>

<script>
	import {
		SubPages
	} from '../../../../config/router-config'
	import {
		mapGetters
	} from 'pinia'
	import {
		useAuthStore
	} from '@/store/modules/auth'
	export default {
		data() {
			return {
				reportColumns: [{
						icon: 'baoxiu',
						label: '报修',
						iconColor: '#D54941',
						iconBackgoundColor: '#FFF0ED',
						isDot: false,
						router: SubPages.REPORT.router,
					}, {
						icon: 'gongdan',
						label: '我的工单',
						iconColor: '#E37318',
						iconBackgoundColor: '#FFF1E9',
						isDot: false,
						router: SubPages.MY_WORK_ORDER.router

					}, {
						icon: 'gongdanchaxun',
						label: '工单查询',
						iconColor: '#D8A100',
						iconBackgoundColor: '#FFF5E4',
						isDot: false,
						router: SubPages.WORK_ORDER_SEARCH.router
					}, {
						icon: 'gongdanshenhe',
						label: '工单审核',
						iconColor: '#2BA471',
						iconBackgoundColor: '#E3F9E9',
						isDot: false,
						router: SubPages.WORK_ORDER_REVIEW_INDEX.router,
					},

				],
			}
		},
		computed: {
			...mapGetters(useAuthStore, ['isLogin']),
		},
		methods: {

			toFaultReport() {
				if (this.isLogin) {
					uni.navigateTo({
						url: SubPages.REPORT.router
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '暂未登录,是否去登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: MainPages.LOGIN.router
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					})
				}
			},
			toReportSearch() {
				if (this.isLogin) {
					uni.navigateTo({
						url: SubPages.WORK_ORDER_SEARCH.router
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '暂未登录,是否去登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: MainPages.LOGIN.router
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 328rpx;
		height: 148rpx;
		background: #FFFFFF linear-gradient(135deg, #0052D9 0%, rgba(0, 163, 217, 0.5) 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
	}

	.text {
		margin: 32rpx;
	}

	.icon {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.m {
		&-t {
			&-64 {
				margin-top: 64rpx;
			}
		}
	}
</style>